<template>
	<view class="notice u-skeleton">
		<u-navbar title="帮助中心" :background="{'backgroundColor':'#fff'}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="title">
				<text>{{item.title}}</text>
				<u-icon name="arrow-up" size="30" v-if="item.judge == true" @click="item.judge = false"></u-icon>
				<u-icon name="arrow-down" size="30" v-else  @click="item.judge = true"></u-icon>
			</view>
			<view class="box" v-if="item.judge">
				<u-parse :html="item.context"></u-parse>
			</view>
		</view>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				// 首次进入加载
				loding: true,
				list:[]
			}
		},
		onShow() {
			this.getinfo();
		},
		methods: {
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/common/helpList',
					success:res=>{
						this.list = res.data.map(item=>{
							let obj = {
								judge:false,
								...item
							}
							return obj;
						});
						this.loding = false;
					}
				})
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.notice{
		.item{
			min-height: 100rpx;
			background: #fff;
			margin: 30rpx;
			padding: 30rpx;
			.title{
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

</style>